/* eslint-disable max-len */
import React from 'react';
import styles from '../components/Geojson.less';

// 创建边缘线层
// 最后一层的时候需要判断一下， 配置
export const createOutlines = ({
  path, color, uuid
}) => {
  const len = 8;
  const lastTranslate = `translate(0, ${-3 * len})`;
  return (
    <>
      <defs>
        <path
          id={`path-${uuid}`}
          stroke={color}
          d={path}
        >
        </path>
        <pattern id={`polka-dots-${uuid}`} x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
          <circle fill="rgba(255, 255, 255, .3)" cx="8" cy="8" r="4"></circle>
        </pattern>
        <radialGradient id={`r3-${uuid}`} cx="50%" cy="50%" r="100%">
          <stop offset="0%" stopColor={`${color}b3`}></stop>
          <stop offset="70%" stopColor={`${color}1a`}></stop>
        </radialGradient>
      </defs>
      <use fill="rgba(5, 19, 47, .8)" xlinkHref={`#path-${uuid}`}></use>
      {new Array(len).fill().map((_, i) => (
        <use
          key={`region-${i}`}
          fill="none"
          transform={`translate(0, ${-3 * i})`}
          xlinkHref={`#path-${uuid}`}
          strokeOpacity={0.3 + 0.1 * i}
        ></use>
      ))}
      <use xlinkHref={`#path-${uuid}`} fill={color} transform={lastTranslate} fillOpacity={0.3}></use>
      <use xlinkHref={`#path-${uuid}`} fill={`url(#polka-dots-${uuid})`} transform={lastTranslate}></use>
      <use xlinkHref={`#path-${uuid}`} fill={`url(#r3-${uuid})`} transform={lastTranslate}></use>
    </>
  );
};

// 高亮时的区域文字
export const hightlightLabel = ({ name, posi }, activeFont) => (<text
  className={styles.hightlightLabel}
  style={{
    ...activeFont,
    fill: activeFont.color,
    textShadow: '0 10px 10px rgba(0,0,0,0.5)'
  }}
  x={posi[0] - 70}
  y={posi[1]}
>
  {name}
</text>);

export function defines({
  id, rect = '#D7BC2F'
}) {
  return (
    <defs key={id}>
      <linearGradient x1="50%" y1="0%" x2="50%" y2="99.9261116%" id={`linear-${id}`}>
        <stop stopColor={rect} stopOpacity="0" offset="0%"></stop>
        <stop stopColor={rect} offset="49.683277%"></stop>
        <stop stopColor={rect} stopOpacity="0" offset="100%"></stop>
      </linearGradient>
      <filter filterUnits="objectBoundingBox" id="filter-3">
        <feMorphology radius="1.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
        <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
        <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
        <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
        <feColorMatrix values="0 0 0 0 0.843137255   0 0 0 0 0.737254902   0 0 0 0 0.184313725  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
      </filter>
    </defs>
  );
}
